.box{
    margin:10px auto;
    width:300px;
    height:300px;
}
.box-0000{
    background: linear-gradient(#fb3 50%, #58a 0);
    background-size: 100% 30px;
}
.box-0001{
    background: linear-gradient(45deg, 
            #fb3 25%, #58a 0, #58a 50%,
            #fb3 0, #fb3 75%, #58a 0);
    background-size: 42.4px 42.4px;
}
.box-0002{
    background: #58a;
    background-image: linear-gradient(white 2px, transparent 0),
                    linear-gradient(90deg, white 2px, transparent 0),
                    linear-gradient(hsla(0,0%,100%,.3) 1px, transparent 0),
                    linear-gradient(90deg, hsla(0,0%,100%,.3) 1px, transparent 0);
    background-size: 50px 50px, 50px 50px,
                    10px 10px, 10px 10px;
}
.box-0003{
    background: #655;
    background-image: radial-gradient(tan 20%, transparent 0),
                    radial-gradient(tan 20%, transparent 0);
    background-size: 30px 30px;
    background-position: 0 0, 15px 15px;
}
.box-0004{
    background: #eee;
    background-image: 
        linear-gradient(45deg, rgba(0,0,0,.25) 25%, transparent 0, transparent 75%, rgba(0,0,0,.25) 0),
        linear-gradient(45deg, rgba(0,0,0,.25) 25%, transparent 0, transparent 75%, rgba(0,0,0,.25) 0);
    background-position: 0 0, 15px 15px;
    background-size: 30px 30px;
}
.box-0005{
    background: hsl(20, 40%, 90%);
    background-image: 
        linear-gradient(90deg, #fb3 11px, transparent 0),
        linear-gradient(90deg, #ab4 23px, transparent 0),
        linear-gradient(90deg, #655 23px, transparent 0);
    background-size: 83px 100%, 61px 100%, 41px 100%;
}
.box-0006{
    background-color: #655;
    background-image:
        radial-gradient(tan 15%, transparent 0),
        radial-gradient(tan 15%, transparent 0);
    background-size: 60px 60px;
    background-position: 0 0, 30px 30px;
}
.box-0007{
    background-color:#269;
    background-image: linear-gradient(red 1px, transparent 0),linear-gradient(90deg, yellow 1px, transparent 0);
    background-size:20px 20px;
}
.box-0008{
    background-image:
        linear-gradient(45deg, #bbb 25%, transparent 0),
        linear-gradient(45deg, transparent 75%, red 0);
}
.box-0009{
    background-image:
        linear-gradient(45deg, #bbb 25%, transparent 0),
        linear-gradient(45deg, transparent 75%, red 0);
    background-position: 0 0, 15px 15px;
}
.box-0010{
    background-image: linear-gradient(45deg, #bbb 25%, transparent 0),
        linear-gradient(45deg, transparent 75%, red 0),
        linear-gradient(45deg, #bbb 25%, transparent 0),
        linear-gradient(45deg, transparent 75%, red 0);
    background-position: 0 0, 15px 15px, 15px 15px, 30px 30px;
}
.box-0011{
	border:1px solid transparent;
    background:
        linear-gradient(white,white) padding-box, 
        repeating-linear-gradient(
                -45deg,black 0,black 25%,white 0,white 50%
                ) 0 / .6em .6em;
	animation:line 12s linear infinite;
}
@keyframes line {
	to {
        background-position:100%;
    }
}
.box-0003{

}
.box-0003{

}
.box-0003{

}
.box-0003{

}
.box-0003{

}
.box-0003{

}
.box-0003{

}
.box-0003{

}